<!-- eslint-disable vue/html-indent -->
<template>
  <div class="edition_detail">
    <div class="title">
      <p class="tip">{{ changeList?.versionInfoName }}-详情</p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <div class="faultDecriptSummary">
            {{ changeList.versionInfoName }}
          </div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="版本编号">
              {{ changeList.versionInfoNo ? changeList.versionInfoNo : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="所属应用系统">
              {{ changeList.systemName ? changeList.systemName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="版本类型">
              {{ changeList.versionTypeName ? changeList.versionTypeName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="下发中心">
              {{ changeList.agencyCenterName ? changeList.agencyCenterName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="下发技术局">
              {{ changeList.issuedUnitName ? changeList.issuedUnitName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="下发分行">
              {{ changeList.issuedBranchName ? changeList.issuedBranchName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="涉及外围系统">
              {{ changeList.sysName ? changeList.sysName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="版本发布标题">
              {{ changeList.versionInfoName ? changeList.versionInfoName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="升级内容摘要">
              {{ changeList.versionName ? changeList.versionName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="业务需求内容">
              {{
                changeList.businessRequirementText
                  ? changeList.businessRequirementText
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="功能描述">
              {{ changeList.versionDescription ? changeList.versionDescription : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="涉及模块/服务">
              {{ changeList.issuedNo ? changeList.issuedNo : "--" }}
            </el-descriptions-item>

            <el-descriptions-item label="测试要点">
              {{
                changeList.businessValidationText
                  ? changeList.businessValidationText
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="业务测试人员">
              {{ changeList.questionId ? changeList.questionId : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="技术测试人员">
              {{ changeList.drafterId ? changeList.drafterId : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="涉及更新的库">
              {{ changeList.acceptOrganization ? changeList.acceptOrganization : "--" }}
            </el-descriptions-item>

            <el-descriptions-item label="涉及更新的服务">
              {{ changeList.createunits ? changeList.createunits : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="涉及重启的服务">
              {{ changeList.copyRequiteUnit ? changeList.copyRequiteUnit : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="涉及变更的内容">
              {{ changeList.noticeText ? changeList.noticeText : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="是否通报办公室">
              {{
                changeList.ifReportOffice == 1
                  ? "是"
                  : changeList.ifReportOffice == 2
                  ? "否"
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="是否报备银保监会">
              {{
                changeList.ifReportCbrc == 1
                  ? "是"
                  : changeList.ifReportCbrc == 2
                  ? "否"
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="是否通报客服中心">
              {{
                changeList.ifReportCallCenter == 1
                  ? "是"
                  : changeList.ifReportCallCenter == 2
                  ? "否"
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="是否需停业升级">
              {{
                changeList.ifStopBusiness == 1
                  ? "是"
                  : changeList.ifStopBusiness == 2
                  ? "否"
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="开始升级时间">
              {{ changeList.startUpgradeTime ? changeList.startUpgradeTime : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="完成升级时间">
              {{ changeList.endUpgradeTime ? changeList.endUpgradeTime : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="升级支持人">
              {{ changeList.technicalSupportId ? changeList.technicalSupportId : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="升级支持电话 ">
              {{
                changeList.technicalSupportPhone ? changeList.technicalSupportPhone : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="是否安全审核">
              {{
                changeList.ifSafetyAudit == 1
                  ? "是"
                  : changeList.ifSafetyAudit == 2
                  ? "否"
                  : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="安全审核人">
              {{ changeList.safetyAuditName ? changeList.safetyAuditName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="是否自动化">
              {{
                changeList.isAutomate == 1
                  ? "是"
                  : changeList.isAutomate == 2
                  ? "否"
                  : "-- "
              }}
            </el-descriptions-item>
            <el-descriptions-item label="自动化实施人">
              {{ changeList.automateAuditName ? changeList.automateAuditName : "--" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="technological">
        <p class="titBox">流程记录</p>
        <div class="block">
          <!--  v-if="show" activities-->
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              type="primary"
              size="large"
              :timestamp="activity.performerTime"
              placement="top"
              :reverse="true"
              color="#007AF5 "
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">{{ activity.taskName }}</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">{{ activity.performName }}</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item">
                    {{ activity.performDesc }}
                  </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">{{ activity.performerName }}</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">{{ activity.performerTel }}</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">{{ activity.nextTaskName }}</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">{{ activity.nextPerformerDesc }}</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">{{ activity.performerTime }}</span>
                </div>
              </el-card>

              <!-- <el-card class="box-card">
                                <div v-for="o in 8" :key="o" class="text item">
                                    {{ "列表内容 " + o }}
                                </div>
                            </el-card> -->
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty description="暂无流程" v-if="!show"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { pubflowlist, selectVmBizInfoById } from "@/http/api/edition";
const route = useRoute();
const router = useRouter();
const activities = reactive([]);
const changeCode = ref(route.params.value);
const changeList = ref("");
const type = ref(route.params.type);
const show = ref(true);
// const fmId = ref('');
const address = ref(router.options.history.state.back.split("/")[1]);
const pageNum = ref("1");
const pageSize = ref("20");
const total = ref("");
onMounted(() => {
  selectVmBizInfoByDetail();
  pubflow_list();
});
const goBack = () => {
  router.push({
    name: address.value,
    params: {
      Index: type.value,
    },
  });
};
const selectVmBizInfoByDetail = () => {
  selectVmBizInfoById({
    versionInfoId: changeCode.value,
  }).then((res) => {
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    changeList.value = res.data.data;
  });
};
const pubflow_list = () => {
  pubflowlist({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    bizId: changeCode.value,
  }).then((res) => {
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    activities.length = 0;
    (activities as any).push(...res.data.data.rows);
    total.value = res.data.data.total;
    if (!total.value) {
      show.value = false;
    }
  });
};
</script>

<style lang="less" scoped>
.edition_detail {
  width: 100%;
  min-height: 100vh;
  // background: rgb(84, 84, 95);
  background: #eaeef4;
  padding: 20px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: space-between;
    height: 34px;
    margin-bottom: 12px;
    .tip {
      line-height: 34px;
      font-size: 14px;
      font-weight: 400;
      color: #46545d;
    }
    .btn {
      width: 80px;
      height: 34px;
      background: #007af5;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      border: 0;
    }
  }
  .details {
    display: flex;
    justify-content: space-between;
    .information {
      width: 60%;
      // margin: auto;
      .titBox {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #46545d;
        margin-bottom: 20px;
      }

      .essential {
        // margin-bottom: 40px;
        padding: 20px;
        background: #fff;
        border-radius: 6px;
        .faultDecriptSummary {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }
        .el-descriptions {
          :deep(.is-bordered) {
            //border-collapse: separate;
            tbody {
              margin-bottom: 3px;

              .el-descriptions-row {
                // :deep(.el-descriptions-item__label:not(.is-bordered-label)) {
                // }
                .el-descriptions-item__cell {
                  &.el-descriptions-item__label {
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                    border: 3px solid #fafafa;
                    border-bottom: none;
                    border-right: 3px solid #fff;
                    font-size: 14px;
                    font-weight: 400;
                    color: #929ea8;
                  }
                  &.el-descriptions-item__content {
                    background: #fafafa !important;
                    padding: 5px 10px;
                    border-left: 3px solid #fafafa;
                    border-top: none;
                    border-right: 3px solid #fff;
                    border-bottom: 3px solid #fff;
                    font-size: 14px;
                    font-weight: 400;
                    color: #46545d;
                  }
                }
                :deep(.el-descriptions-item__label) {
                  //margin-right: 3px;
                  background: #fafafa !important;
                  padding: 10px 10px 0;
                }
              }
            }
          }
        }
      }
    }
    .technological {
      width: 35%;
      .titBox {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #46545d;
        margin-bottom: 20px;
      }
      .el-divider {
        .el-divider__text {
          font-size: 16px;
          line-height: 35px;
        }
      }
      .block {
        .el-timeline {
          width: 80%;
          margin: 0 auto;
          .el-timeline-item__tail {
            //width: 1px;

            border: 1px solid #007af5;
          }
          :deep(.el-timeline-item__timestamp) {
            font-size: 14px;
            font-weight: 400;
            color: #46545d;
          }
          :deep(.el-timeline-item__content) {
            color: #fff;
            .box-card {
              border-radius: 10px;
              .el-card__body {
                .text {
                  min-height: 30px;
                  display: flex;
                  justify-content: space-between;
                  font-size: 14px;
                  font-weight: 400;
                  color: #929ea8;
                  .item {
                    max-width: 70%;
                    color: #46545d;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
